<template>
	<Content title="维修完成">
		<view class="repair-completed-box" style="padding-bottom: 160rpx">
			<view class="content content-bottom">
				<u-form labelPosition="left" :model="model" labelWidth="120" labelAlign="left" :rules="rules"
					ref="uForm">
					<u-form-item :borderBottom="true" label="故障部位" prop="faultPart" required>
						<u-input label v-model="model.faultPart" placeholder="请填写故障部位" clearable></u-input>
					</u-form-item>

					<u-form-item :borderBottom="true" label="故障现象" prop="faultDesc" required>
						<u-input label v-model="model.faultDesc" placeholder="请填写故障现象" clearable></u-input>
					</u-form-item>

					<u-form-item :borderBottom="true" label="故障类型" prop="faultTypeList" required>
						<uni-data-select v-model="model.faultTypeList" multiple dictCode="故障类型"
							placeholder="请选择"></uni-data-select>
					</u-form-item>

					<u-form-item :borderBottom="true" label="部件" prop="originIncident">
						<uni-data-select v-model="model.originIncident" dictCode="部件" multiple
							placeholder="请选择"></uni-data-select>
					</u-form-item>

					<u-form-item :borderBottom="true" label="故障原因" required prop="faultReason">
						<u-textarea v-model="model.faultReason" placeholder="请填写故障原因"></u-textarea>
					</u-form-item>

					<u-form-item :borderBottom="true" label="维修处置内容" required prop="repairContent">
						<u-textarea v-model="model.repairContent" placeholder="请填写维修处置内容"></u-textarea>
					</u-form-item>

					<u-form-item :borderBottom="true" label="遗留问题" prop="leftProblem">
						<u-textarea v-model="model.leftProblem" placeholder="请填写遗留问题"></u-textarea>
					</u-form-item>

					<u-form-item :borderBottom="true" label="维修处置结果" prop="repairResult">
						<uni-data-select v-model="model.repairResult" :localdata="repairResultList"
							placeholder="请选择"></uni-data-select>
					</u-form-item>

					<u-form-item label="是否重大变改" prop="isGreatChange" required :borderBottom="true">
						<u-radio-group v-model="model.isGreatChange" placement="row">
							<u-radio label="否" name="否" style="margin-right: 20px"></u-radio>
							<u-radio label="是" name="是"></u-radio>
						</u-radio-group>
					</u-form-item>

					<!-- <u-form-item :borderBottom="true" labelPosition="top" label="协助维修人" prop="remark">
						<view class="user-box">
							<view class="box-item" v-for="(item, index) in assisterList" :key="item.userId">
								<text class="label">姓名:</text>
								<u-input class="box-input" label v-model="assisterList[index].name" placeholder="请填写姓名"
									clearable></u-input>
								<text class="del" @click="delUser(index)">删除</text>
							</view>
							<view class="btn" @click="addUser">+添加</view>
						</view>

					</u-form-item> -->
					<view class="content">
						<view class="title">协助维修人</view>
						<view class="simple-table-scroll" style="margin-top: 20rpx;">
							<view class="simple-table">
								<view class="simple-table-tr">
									<view class="simple-table-th simple-table-flex">姓名</view>
									<view class="simple-table-th simple-table-flex">工号</view>
									<view class="simple-table-th simple-table-flex">操作</view>
								</view>
								<view class="simple-table-tr" v-for="(item, index) in assisterList" :key="index">
									<view class="simple-table-td simple-table-flex">{{item.name}}</view>
									<view class="simple-table-td simple-table-flex">{{item.empno}}</view>
									<view class="simple-table-td simple-table-flex">
										<u-button class="delete-btn" type="error" hairline plain :throttleTime="1000"
											@click="delUser(index)">删除</u-button>
									</view>
								</view>
							</view>
						</view>
						<view class="add-btn" @click="addUser">+添加</view>
					</view>
					<u-form-item :borderBottom="true" labelPosition="top" label="使用物料" prop="remark">
						<view class="materia-list">
							<view class="materia-box" v-for="(item, index) in makeDataSource" :key="item.id">
								<view class="box-l">
									<view class="box-item">
										<text class="label">物料号:</text>
										<uni-data-select class="box-input" v-model="makeDataSource[index].moldCode"
											:localdata="materielNoList" showInput @inputChange="materielNoChangeAdd"
											placeholder="请选择" @change="
                        materieChange(makeDataSource[index].moldCode, index)
                      "></uni-data-select>
									</view>
									<view class="box-item">
										<text class="label">品名:</text>
										<u-input class="box-input" label v-model="makeDataSource[index].goodsName"
											placeholder="请填写品名" clearable></u-input>
									</view>
									<view class="box-item">
										<text class="label">规格:</text>
										<u-input class="box-input" label v-model="makeDataSource[index].specification"
											placeholder="请填写规格" clearable></u-input>
									</view>
									<view class="box-item">
										<text class="label">数量:</text>
										<u-input class="box-input" label type="number"
											v-model="makeDataSource[index].qty" placeholder="请填写数量" clearable></u-input>
									</view>
								</view>
								<view class="box-r">
									<text class="del" @click="delMaterial(index)">删除</text>
								</view>
							</view>
							<view class="btn" @click="addMaterial">+添加</view>
						</view>
					</u-form-item>

					<u-form-item :borderBottom="true" label="上传附件" prop="remark">
						<MyUpload v-model="fileList" multiple :maxCount="5"></MyUpload>
					</u-form-item>

					<view class="btn-v">
						<view class="but-box">
							<u-button class="btn" @click="close" text="取消"></u-button>
							<u-button class="btn" type="primary" @click="submit" text="确认"></u-button>
						</view>
					</view>
				</u-form>
			</view>
		</view>
	</Content>
</template>

<script>
	import Content from "@/components/content/index";
	import {
		getPageData,
		getUserInfo
	} from "@/store/user";
	import fetch from "@/utils/fetch";
	import MyUpload from "@/components/myUpload";
	export default {
		options: {
			multipleSlots: true,
		},
		components: {
			Content,
			MyUpload,
		},
		data() {
			return {
				storageKey: 'moldMaintenance',
				userInfo: {},
				model: {
					faultPart: "",
					isGreatChange: "",
					repairResult: "",
					faultTypeList: "",
					faultDesc: "",
				},
				repairResultList: [{
						value: "未处理",
						text: "未处理"
					},
					{
						value: "应急处理",
						text: "应急处理"
					},
					{
						value: "复原处理",
						text: "复原处理"
					},
				],
				rules: {
					faultPart: {
						required: true,
						message: "请填写",
						trigger: "blur"
					},
					repairContent: {
						required: true,
						message: "请填写",
						trigger: "blur"
					},
					faultReason: {
						required: true,
						message: "请填写",
						trigger: "blur"
					},
					isGreatChange: {
						required: true,
						message: "请填写",
						trigger: "change"
					},
					// repairResult: { required: true, message: "请填写", trigger: "change" },
					component: {
						required: true,
						message: "请填写",
						trigger: "change",
					},
					faultTypeList: {
						required: true,
						message: "请填写",
						trigger: "change",
					},
					faultDesc: {
						required: true,
						message: " ",
						trigger: "blur"
					},
				},
				fileList: [],
				assisterList: [],
				makeDataSource: [],
				materielNoList: [],
				id: "",
			};
		},
		onShow: function() {
			const selections = uni.getStorageSync(this.storageKey) || [];
			this.assisterList = Array.isArray(selections) ?
				selections.map((item) => {
					return {
						userId: item.id,
						name: item.name,
						...item,
					};
				}) : [];
		},
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			this.id = option.id;
		},
		onReady: function() {
			this.userInfo = getUserInfo();
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
		},
		mounted() {},
		methods: {
			//选中值传（值可自定义，初始id与value用|分割，根据实际用途定义）
			getBackVal: function(e) {
				console.log("getBackVal---------", e);
			},
			delUser(index) {
				this.assisterList.splice(index, 1);
			},
			materieChange(val, index) {
				console.log("val, index", val, index);
				if (!val) {
					this.$set(this.makeDataSource, index, {
						code: "",
						qty: "",
						goodsName: "",
						specification: "",
					});
					return;
				}
				const obj = this.materielNoList.find((item) => item.materialCode == val);
				console.log("obj", this.materielNoList, obj);
				if (obj) {
					this.$set(this.makeDataSource, index, {
						code: obj.materialCode,
						goodsName: obj.materialName,
						specification: obj.materialModel,
						qty: this.makeDataSource[index].qty,
					});
				}
				console.log("this.makeDataSource", this.makeDataSource);
			},
			materielNoChangeAdd(val, value) {
				if (
					val &&
					this.materielNoList.find(
						(item) => item.materielNo + "-" + item.materielName === val
					)
				) {
					return;
				}
				const params = {
					materialCode: val,
					pageNum: 1,
					pageSize: 9999,
				};
				this.$loading.open();
				fetch("post", "/dms/material/page", params).then((res) => {
					if (res.code === 200) {
						if (res.data) {
							this.materielNoList = res.data.records.map((item) => {
								return {
									...item,
									text: item.materialCode,
									value: item.materialCode,
								};
							});
						}
						if (value) {
							this.model.bomId = Number(value);
						}
					}
				});
			},
			addUser() {
				uni.navigateTo({
					url: "/pages/common/operator/index?storageKey=" + this.storageKey + '&multiple=true',
					animationType: "pop-in",
				});
			},
			delMaterial(index) {
				this.makeDataSource.splice(index, 1);
			},
			addMaterial() {
				this.makeDataSource.push({
					code: "",
					goodsName: "",
					specification: "",
					qty: "",
				});
			},
			close() {
				uni.navigateBack({
					delta: 1, //返回上一页
				});
			},
			submit() {
				const that = this;
				that.$refs.uForm.validate().then((valid) => {
					if (valid) {
						let param = {
							...this.form,
						};
						// param.faultTypeList = param.faultTypeList.join(",");
						// param.component = param.component.join(",");
						fetch("post", "/dms/moldMaintenanceHall/complete", {
							...that.model,
							id: that.id,
							materialList: that.makeDataSource,
							assisterList: that.assisterList,
							uploadRepairAttachment: that.fileList.map((item) => {
								return {
									...param,
									fileName: item.fileName,
									filePath: item.url,
									fileUrl: item.url,
								};
							}),
						}).then((data) => {
							uni.setStorageSync("getSelectLists", "");
							uni.getStorageSync("getSelectList", "");
							uni.$emit("openToast", {
								type: "success",
								title: "申请成功",
								complete() {
									uni.navigateBack({
										delta: 1, //返回上一页
									});
								},
							});
						});
					} else {}
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	@import '@/static/styles/hall-operate.scss';
	.repair-completed-box {
		padding: 20rpx;
		height: 100%;
		overflow: auto;
		display: flex;
		flex-direction: column;

		/deep/ .u-form-item__body__left__content__label {
			margin-left: 20rpx;
		}

		// /deep/ .uni-select {
		//     border: none;
		//     border-bottom: none;
		//     line-height: 26px;
		//     height: 24px !important;
		//     padding-left: 0;
		// }

		/deep/ .uni-select__input-placeholder {
			color: #cbc9cc !important;
			font-size: 15px !important;
		}
	}

	.content {
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		border-radius: 5px;
		box-shadow: 0 12rpx 18rpx -6rpx rgba(0, 0, 0, 0.2);
	}

	.content-bottom {
		flex: 1;
	}

	.data-select {
		/deep/ .uni-select__selector {
			top: -155px;

			.uni-popper__arrow {
				display: none;
			}
		}
	}

	.box-item {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;

		.label {
			width: 100rpx;
		}

		.box-input {
			margin: 0 20rpx;
		}
	}

	.del {
		color: #a30014;
	}

	.materia-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.box-l {
			flex: 1;
		}

		.box-r {}
	}

	.user-box,
	.materia-list {
		width: 100%;
		padding: 20rpx 40rpx;

		.btn {
			width: 100%;
			text-align: center;
			color: #3c9cff;
		}
	}

	
</style>